<template>
  <div class="nav_outer">
    <Header>新人红包</Header>
    <div class="content">
       <div class="banner">
           <img src="../assets/img/rewardnew@2x.png" alt="">
       </div>
       <div class="recotasks">
           <h5>推荐任务</h5>
           <div class="task">
               <p class="task_title">实名认证</p>
               <p class="flex_bet">
                   <span>实名认证,优先获取工作机会</span>
                   <span class="common_statu done" v-if="arr[0]">已完成</span>
                   <span class="common_statu" @click="navito('/verify')" v-else>去参加</span>
               </p>
           </div>
           <div class="task">
               <p class="task_title">完善简历</p>
               <p class="flex_bet">
                   <span>完善个人简历,得积分好礼</span>
                   <span class="common_statu done" v-if="arr[1]">已完成</span>
                   <span class="common_statu" @click="navito('/resume')">去参加</span>
               </p>
           </div>
           <div class="task">
               <p class="task_title">报名求职</p>
               <p class="flex_bet">
                   <span>首次报名,得超值积分</span>
                   <span class="common_statu done" v-if="arr[2]">已完成</span>
                   <span class="common_statu" @click="navito('/hotjobs?type=1')">去参加</span>
               </p>
           </div>
           <div class="task">
               <p class="task_title">分享岗位</p>
               <p class="flex_bet">
                   <span>分享岗位信息,与好友一起工作</span>
                   <span class="common_statu done" v-if="arr[3]">已完成</span>
                   <span class="common_statu" @click="navito('/hotjobs?type=1')">去参加</span>
               </p>
           </div>
           <div class="task">
               <p class="task_title">新人注册</p>
               <p class="flex_bet">
                   <span>实名认证,优先获取工作机会</span>
                   <span class="common_statu done">已完成</span>
               </p>
           </div>
       </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
        arr:[false,false,false,false,false]
    }
  },
  created() {
     this.loadAwardstatu();
  },
  methods: {
    navito(url){
      this.$router.push({path:url}); 
    },
    loadAwardstatu(){
      let that = this;
      that.Http.get("/yzj/activity/getJoinActivity", null).then(
        res => {
          res.forEach((item,index)=>{
              that.arr[item.type]=true;
          })
        }
      );
    }
  },
  components: {
      Header
  }
}
</script>

<style scoped lang='scss'>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  body{
      background: #F5F5F5!important;
  }
  .content{
    .banner{
        height: px2em(260);
        overflow: hidden;
        >img{
            width: 100%;
        }
    }
    .recotasks{
        padding: px2em(30);
        background: #fff;
        margin-top: 4px;
        .task{
            margin-bottom: px2em(36);
        }
        .flex_bet{
            color: #666!important;
        }
        .task_title{
            font-size: 1.1em;
        }
        h5{
            font-size: 1.1em;
            color: #333;
            margin-bottom: px2em(50);
            font-weight: bold;
        }
        .task>p{
            color: #333;
        }
        .common_statu.done{
            background: #999;
        }
    }
  }
</style>